<template>
  <header class="header">
    <img
      src="https://www.forerunnercollege.com/so/static/img/logo.7d1b3df0.png"
    />
    <aside>
      <ul class="nav-box">
        <li v-for="item in listData" :key="item.name">
          <router-link to="">{{ item.name }}</router-link>
        </li>
      </ul>
      <div class="inputs-box">
        <input
          type="search"
          placeholder="请输入查询内容"
          @input="handleInput($event.target.value)"
        />
        <span class="iconfont icon-fangdajing"></span>
        <ul v-show="searchResult.length > 0 || isShow" class="search-box">
          <li v-if="isShow" style="text-align: right">未查询到结果</li>
          <li v-for="item in searchResult" :key="item.t_content_pk">
            <router-link to="">{{ item.title }}</router-link>
          </li>
        </ul>
      </div>
    </aside>
  </header>
</template>
  
  <script>
import ajax from "@/util/request";

let timeoutId;

export default {
  data() {
    return {
      listData: [
        {
          name: "信息公开",
        },
        {
          name: "互动交流",
        },
        {
          name: "人才招聘",
        },
      ],
      isShow: false,
      searchResult: [],
    };
  },
  methods: {
    handleInput(title) {
       // 有延迟执行被挂起
      if (timeoutId != null) {
        // 清除掉上次的延迟执行
        clearTimeout(timeoutId);
      }
      // console.log("title = ",title);
      if (title == "") {
        this.searchResult = [];
        this.isShow = false;
        return;
      }

      // 把当前请求放入到延迟执行中
      timeoutId = setTimeout(() => {
        ajax("/content/queryList", { title, rows: "10" }).then(
        ({data}) => {
          if (data.status > 0) {
            this.isShow = data.result_data.length == 0;
            this.searchResult = data.result_data;
          }
        }
      );
      },2000)
    },
  },
};
</script>
  
  <style scoped>
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
}

.header > aside {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.nav-box {
  display: flex;
}

.nav-box > li {
  padding: 0px 5px;
}

.nav-box > li > a {
  color: #000;
}

.inputs-box {
  padding-left: 10px;
  position: relative;
}

.inputs-box > input {
  border: 1px solid var(--base-color);
  color: var(--base-color);
  outline: none;
  border-radius: 20px;
  height: 40px;
  width: 200px;
  line-height: 40px;
  padding: 0px 15px;
}

.inputs-box > span {
  position: absolute;
  font-size: 120%;
  right: 10px;
  top: 8px;
}

.search-box {
  position: absolute;
  left: -100px;
  width: 300px;
  max-height: 200px;
  overflow-y: auto;
  z-index: 99;
  background-color: #fff;
  line-height: 26px;
  padding-left: 10px;
  font-size: 80%;
}

.search-box > li > a {
  display: block;
  height: 26px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #000;
}
</style>